<template>
    <div style="width: 100vw;height: 100vh;">
        <div class="map_warp" :style="{ transform: `scale(${scaleRatio})` }">
            <div class="map_header">
                <div class="map_header_left">{{ dayweather }} {{ daytemp }}℃</div>
                <div class="map_header_center">贞一环境智慧运管中心</div>
                <div class="map_header_rihgt">
                    <span>{{ dateFormat(date) }} </span>
                    <img style="width: 30px;height: 30px;" src="../imgUrl/mapOut.png" alt="">
                    <span @click="closeFun" style="font-size: 26px;padding: 0 10px;">关闭</span>
                </div>
            </div>
            <div class="map_center">
                <div class="map_center_left">
                    <div class="mapleft">
                        <img style="width: 100%;height: 100%;" src="../imgUrl/mapleft.png" alt="">
                    </div>
                    <div style="padding-left: 33px;">
                        <div class="mapleft_card ">
                            <div class="maptitle">设备统计</div>
                            <div>
                                <bar3DMapChartshe :height="'21vh'" />
                            </div>
                        </div>
                        <div class="mapleft_card">
                            <div class="maptitle">巡检统计</div>
                            <div>
                                <bar3DMapChartleftStart :height="'21vh'" />
                            </div>
                        </div>
                        <div class="mapleft_card">
                            <div class="maptitle">巡检记录</div>
                            <div class="maptable">
                                <autoScroll :step="1" :period="50" :cycle="true" :resume-smooth="true"
                                    @scrollEnd="scrollEndone">
                                    <div class="maptable_list auto-scroll-row" :key="index"
                                        v-for="(item, index) of mapInspection">
                                        <div class="maptable_li " style="text-align: left;">{{ item.name }}</div>
                                        <div class="maptable_li" style="text-align:center;">{{ item.times }}</div>
                                        <div class="maptable_li" style="text-align: right;">{{ item.remerk }}</div>
                                    </div>
                                </autoScroll>

                            </div>
                        </div>
                    </div>
                </div>
                <div class="map_center_map">
                    <div class="center_img">
                        <div style="color: white;display: flex;justify-content: center;">
                            <!-- <div style="width: 400px;margin-top: -50px;position: relative;">
                                <img style="width: 100%;height: 60px;" src="../imgUrl/site.png" alt="">
                                <div
                                    style="display: flex;position:absolute;top: 0;padding-top: 12px;padding-left: 5px;">
                                    <div style="width: 120px;text-align: center;font-size: 20px;">全部站点</div>
                                    <div
                                        style="width: 260px;border-left: 1px solid #5C8AB7;position: relative;display: flex;">
                                        <div style="width: 240px;padding: 10px;">{{ arrowDownName }}</div>
                                        <div @click="arrowDownFun()"
                                            style="position: absolute;right: 0;width: 20px;padding-top: 10px;">
                                            <i v-if="arrowDownData" class="el-icon-arrow-down"
                                                style="font-size: 20px;"></i>
                                            <i v-else class="el-icon-arrow-up" style="font-size: 20px;"></i>
                                        </div>

                                    </div>
                                </div>
                                <div v-if="arrowDownData" class="arrowDownUr">
                                    <div class="arrowDownLi" :class="{ 'arrowDownLiClick': arrowDownID == item.id }"
                                        @click="arrowDownitem(item)" :key="index" v-for="(item, index) of groupData">
                                        {{ item.groupName }}
                                    </div>
                                </div>
                            </div> -->
                            <!-- <div class="arrowDownSelesWarp">
                                <div class="arrowDownSeles">
                                    <div class="arrowDownSelesLeft">
                                        {{ arrowDownSelseName }}
                                    </div>
                                    <div @click="arrowSelesFun()" class="arrowDownSelesright">
                                        <i v-if="arrowSelesData" class="el-icon-arrow-down"
                                            style="font-size: 20px;"></i>
                                        <i v-else class="el-icon-arrow-up" style="font-size: 20px;"></i>
                                    </div>
                                </div>
                                <div v-if="arrowSelesData" class="arrowDownSelesLsit">
                                    <div :class="{ 'arrowDownSelesLiClick': arrowDownSelseID == item.id }"
                                        @click="arrowDownSelse(item)" :key="index" v-for="(item, index) of yearsData"
                                        class="arrowDownSelesLi"> {{
                                            item }}</div>
                                </div>
                            </div> -->


                        </div>
                    </div>
                    <div class="center_warp">
                        <div class="mapleft_card">
                            <div class="maptitle">能耗统计</div>
                            <div>
                                <lineAndebarMapChartStart :height="'21vh'" />
                            </div>
                        </div>
                        <div class="mapleft_card">
                            <div class="maptitle">产泥信息</div>
                            <div>
                                <barMapGeeChartStart :height="'21vh'" />
                            </div>
                        </div>
                    </div>
                </div>
                <div class="map_center_right">
                    <div style="padding-right: 25px;">
                        <div class="mapRight_card">
                            <div class="maptitle">进出水统计</div>
                            <div>
                                <lineMapChartStart :height="'21vh'" />
                            </div>
                        </div>
                        <div class="mapRight_card">
                            <div class="maptitle">告警统计</div>
                            <div>
                                <bar3DMapChartStart :height="'21vh'" />
                            </div>
                        </div>
                        <div class="mapRight_card">
                            <div class="maptitle">进水统计</div>
                            <div class="maptable">
                                <autoScroll :step="1" :period="50" :cycle="true" :resume-smooth="true">
                                    <div class="maptable_list auto-scroll-row" :key="index"
                                        v-for="(item, index) of mapInspection">
                                        <div class="maptable_li" style="text-align: left;">{{ item.name }}</div>
                                        <div class="maptable_li" style="text-align:center;">{{ item.times }}</div>
                                        <div class="maptable_li" style="text-align: right;">{{ item.remerk }}</div>
                                    </div>
                                </autoScroll>
                            </div>
                        </div>
                    </div>
                    <div class="mapRight">
                        <img style="width: 100%;height: 100%;" src="../imgUrl/mapright.png" alt="">
                    </div>
                </div>
            </div>
            <div class="map_food">
                <div class="map_food_btn" @click="mapFoodBtn(1)">地图总览</div>
                <div class="map_food_btn" @click="mapFoodBtn(2)">设备管理</div>
                <div class="map_food_btn" @click="mapFoodBtn(3)">数据分析</div>
            </div>

        </div>
    </div>
</template>

<script>
import bar3DMapChartshe from './model/bar3DMapChartshe.vue'
import lineAndebarMapChartStart from './model/lineAndebarMapChartStart.vue'
import barMapGeeChartStart from './model/barMapGeeChartStart.vue'
import bar3DMapChartStart from './model/bar3DMapChartStart.vue'
import lineMapChartStart from './model/lineMapChartStart.vue'
import bar3DMapChartleftStart from './model/bar3DMapChartleftStart.vue'
import axios from 'axios'
import autoScroll from 'vue-list-auto-scroll-tsc'
import AMapLoader from '@amap/amap-jsapi-loader'
import { listGroup } from '@/api/iot/group'
export default {
    name: 'mapping',
    components: {
        autoScroll,
        bar3DMapChartshe,
        lineAndebarMapChartStart,
        barMapGeeChartStart,
        bar3DMapChartStart,
        lineMapChartStart,
        bar3DMapChartleftStart
    },
    data() {
        return {
            arrowDownSelseID: '',
            arrowDownSelseName: '',
            arrowSelesDataList: [{
                name: '2024',
                id: 1
            },
            {
                name: '2025',
                id: 2
            }, {
                name: '2026',
                id: 3
            }],
            arrowSelesData: false,
            arrowDownID: '',
            arrowDownName: '',
            arrowDownList: [{
                name: '甘南站点',
                id: 1
            }],
            arrowDownData: false,
            rolesBoll: true,
            scaleRatio: 1,
            screenWidth: 0,
            widthNum: 1280,
            heightNum: 540,
            latitude: '',
            longitude: '',
            dayweather: '',
            daytemp: '',
            date: new Date(),
            timer: null,
            // mapInspection: [{
            //     name: '1xx站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '2xx站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // },
            // {
            //     name: '3XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // },
            // {
            //     name: '4XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '5XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '6XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }, {
            //     name: '7XX站点',
            //     times: '07-30 16:45',
            //     remerk: '巡检无隐患'
            // }],
            mapInspection: [],
            yearsData: [2024],
            groupData: []
        }
    },
    created() {
        this.mapFun();
        this.recentYears();
        this.listGroupFun();
        // this.getAreaIp()
    },
    mounted() {
        let _this = this// 声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(() => {
            _this.date = new Date(); // 修改数据date
        }, 1000)
        // this.getCurrentPosition()
        // this.updateScreenWidth(); // 初始化宽度
        // window.addEventListener('resize', this.updateScreenWidth); // 监听窗口大小变化
    },
    methods: {
        listGroupFun() {
            let params = {
                pageSize: 999,
                pageNum: 1,
            }
            listGroup(params).then((res) => {
                this.groupData = res.rows;
            })
        },
        recentYears() {
            let currentYear = new Date().getFullYear()
            let years = [];
            for (let i = 0; i < 5; i++) {
                years.push(currentYear + i - 1);
            }
            this.yearsData = years;
        },
        mapFun() {
            window._AMapSecurityConfig = {
                securityJsCode: "249fc67c47f2650bfeec222499e82c16",
            };
            AMapLoader.reset()
            const _this = this
            AMapLoader.load({
                key: '37ab382ecdb27440a23c0a28853e8c86', // 申请好的Web端开发者Key，首次调用 load 时必填
                version: '1.4.15', // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
                plugins: []  // 需要使用的的插件列表，如比例尺'AMap.Scale'等，如果是地图控件，必须再 map.addControl添加
            })
                .then((AMap) => {
                    AMap.plugin('AMap.Weather', function () {
                        //创建天气查询实例
                        var weather = new AMap.Weather();
                        //执行实时天气信息查询
                        weather.getLive('信阳市', function (err, data) {
                            _this.dayweather = data.weather + ' ' + "风向" + data.windDirection + ' ' + "风力" + data.windPower + "级" + ' '
                            _this.daytemp = data.temperature
                        });
                    });
                })
                .catch((e) => {
                    console.log(e)
                })
        },
        scrollEndone() {

        },
        updateScreenWidth() {
            this.screenWidth = window.innerWidth;
            this.scaleRatio = this.screenWidth / 2560
        },

        getCurrentPosition() {
            if (navigator.geolocation) {
                var options = {
                    enableHighAccuracy: true, //布尔值，表示系统是否使用最高精度来表示结果，注意，这会导致较慢的响应时间或者增加电量消耗（比如对于支持gps的移动设备来说）。如果值为false ，设备会通过更快响应以及/或者使用更少的电量等方法来尽可能的节约资源。默认值fasle
                    timeout: 50000, //它表明的是设备必须在多长时间（单位毫秒）内返回一个位置。默认直到获取到位置才会返回值。
                    maximumAge: 0, //表明可以返回多长时间（即最长年龄，单位毫秒）内的可获取的缓存位置。如果设置为 0, 说明设备不能使用一个缓存位置，而且必须去获取一个真实的当前位置。默认0
                };
                navigator.geolocation.getCurrentPosition(
                    this.showPosition,
                    this.errorPosition,
                    options
                );
            } else {
                this.errorPositionTxt = "不支持获取用户当前位置";
            }
        },
        showPosition(position) {
            this.latitude = position.coords.latitude;
            this.longitude = position.coords.longitude;
            this.getArea();
        },
        errorPosition(error) {
            switch (error.code) {
                // 不允许获取当前位置
                case error.PERMISSION_DENIED:
                    this.errorPositionTxt = "不允许获取当前位置";
                    break;
                // 无法获取当前位置
                case error.POSITION_UNAVAILABLE:
                    this.errorPositionTxt = "无法获取当前位置";
                    break;
                // 获取位置的请求超时。
                case error.TIMEOUT:
                    this.errorPositionTxt = "获取位置请求超时。";
                    break;
                // 获取位置操作超时
                case error.UNKNOWN_ERROR:
                    this.errorPositionTxt = "获取位置操作超时";
                    break;
            }
        },

        getAreaIp() {
            axios({
                method: 'get',
                // url: 'https://api.songzixian.com/api/ip',
                url: 'https://api.oioweb.cn/api/weather/GetWeather',
                params: {
                    // dataSource: 'generic_ip',
                }
            }).then((res) => {
                if (res.data.code == 200) {
                    // this.getArea(res.data.data.city)
                    let temp = res.data.result.condition
                    this.daytemp = temp.min_degree + "~" +
                        temp.max_degree
                    this.dayweather = temp.day_weather + "转" + temp.night_weather
                } else {
                    this.$modal.msgError("查询失败");
                }

            })
        },
        getArea(long) {
            let _this = this
            // axios({
            //     method: 'get',
            //     url: 'https://api.songzixian.com/api/weather',
            //     params: {
            //         dataSource: 'gentle_breeze_weather',
            //         weatherType: 'real_time',
            //         location: long
            //     }
            // }).then((res) => {
            //     if (res.data.code == 200) {
            //         console.log(res.data.data)
            //     } else {
            //         this.$modal.msgError("天气查询失败");
            //     }

            // })
            axios({
                url: "https://restapi.amap.com/v3/weather/weatherInfo",
                method: "GET",
                params: {
                    key: "e0c48eb92615d1ab98b5ad25d3c6a044",
                    city: long,
                    extensions: 'all',
                    // output: "JSON"
                },
            }).then(function (response) {
                console.log("查询到的天气哪去了" + response.data.forecasts[0].casts
                [0].dayweather)
                _this.dayweather = response.data.forecasts[0].casts
                [0].dayweather
                _this.daytemp = response.data.forecasts[0].casts
                [0].nighttemp + "~" + response.data.forecasts[0].casts
                [0].daytemp
            }).catch(function (error) {
                console.log(error);

            })
        },
        dateFormat(time) {
            var date = new Date(time);
            var year = date.getFullYear();
            /* 在日期格式中，月份是从0开始的，因此要加0
            * 使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
            * */
            var month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
            var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
            var hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
            var minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
            var seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
            // 拼接
            return month + "月" + day + "日" + " " + hours + ":" + minutes + ":" + seconds;
        },
        arrowDownFun() {
            this.arrowDownData = !this.arrowDownData
        },
        arrowDownitem(item) {
            this.arrowDownID = item.groupId
            this.arrowDownName = item.groupName
            this.arrowDownData = false
        },
        arrowSelesFun() {
            this.arrowSelesData = !this.arrowSelesData
        },
        arrowDownSelse(item) {
            this.arrowDownSelseID = item
            this.arrowDownSelseName = item
            this.arrowSelesData = false
        },
        mapFoodBtn(type) {
            this.$emit('success3', {
                type: type
            })
            // if (type != 2) {
            //     this.$emit('success3', {
            //         type: type
            //     })
            // } else {
            //     if (process.env.NODE_ENV == "development") {
            //         window.open('http://localhost/topo/fullscreen?id=20&guid=bfedb97d-dbf6-453e-857b-91bc85e2da48', '_blank');
            //     } else {
            //         window.open('http://47.113.227.144/topo/fullscreen?id=20&guid=bfedb97d-dbf6-453e-857b-91bc85e2da48', '_blank');
            //     }
            // }
        },
        closeFun() {
            window.close();
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.updateScreenWidth); // 移除监听器
        if (this.timer) {
            clearInterval(this.timer); // 在Vue实例销毁前，清除我们的定时器
        }
    },

}
</script>

<style lang="scss" scoped>
body,
html {
    margin: 0;
    padding: 0;
}



.map_warp {
    width: 100vw;
    height: 100vh;
    // background-image: url(../imgUrl/mapbj.png);
    // background-size: 100% 100%;
    background-color: rgba(2, 11, 32, 1);
    transform-origin: 0% 0%;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;

    .map_header {
        width: 100vw;
        height: 20vh;
        background-image: url(../imgUrl/mapheader.png);
        background-size: 100% 100%;
        color: white;
        position: relative;

        .map_header_left {
            padding-left: 30px;
            padding-top: 41px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 26px;
            color: #a3b1b8;
            line-height: 38px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            position: absolute;
            left: 0;
            top: 0;
        }

        .map_header_center {
            flex: 1;
            text-align: center;
            padding-top: 36px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: 800;
            font-size: 40px;
            color: #FFFFFF;
            line-height: 59px;
            letter-spacing: 5px;
            text-shadow: 2px 4px 4px #11247A;
            text-align: center;
            font-style: normal;
            text-transform: none;
        }

        .map_header_rihgt {
            text-align: right;
            padding-right: 20px;
            padding-top: 41px;
            font-family: Alibaba PuHuiTi, Alibaba PuHuiTi;
            font-weight: bold;
            font-size: 26px;
            color: #a3b1b8;
            line-height: 38px;
            text-align: center;
            font-style: normal;
            text-transform: none;
            position: absolute;
            right: 20px;
            top: 0;
        }
    }

    .map_food {
        width: 100vw;
        height: 10vh;
        background-image: url(../imgUrl/mapfood.png);
        // margin-top: -45px;
        background-size: 100% 100%;
        display: flex;
        justify-content: center;

        .map_food_btn {
            background-image: url(../imgUrl/mapfoodbtn.png);
            background-size: 100% 100%;
            width: 143px;
            height: 52px;
            color: white;
            text-align: center;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 20px;
            line-height: 52px;
            letter-spacing: 1px;
            text-shadow: 0px 3px 10px #0032B2;
            text-align: center;
            font-style: normal;
            text-transform: none;
            margin-right: 12px;
            margin-top: -30px;
            display: inline-block;
            cursor: pointer;
        }
    }

    .map_center {
        width: 100%;
        margin-top: -100px;
        display: flex;

        .map_center_left {
            display: flex;

            .mapleft {
                width: 33.5px;
            }

            .mapleft_card {
                width: 22vw;
                height: 24.5vh;
                background-image: url(../imgUrl/mapcard.png);
                background-size: 100% 100%;
                margin-bottom: 20px;

                .maptable {
                    width: 96%;
                    height: 21vh;
                    padding: 10px;
                    padding: 10px 0;
                    overflow: hidden;
                    text-align: center;
                    margin: 2px auto;

                    ::-webkit-scrollbar {
                        display: none;
                    }

                    .maptable_list {
                        display: flex;
                        width: 100%;
                        height: 24px;
                        font-size: 14px;
                        background: rgba(0, 163, 255, 0.3);
                        border-radius: 0px 0px 0px 0px;
                        color: rgba(255, 255, 255, 1);
                        padding: 5px;
                        margin-top: 3px;

                        .maptable_li {
                            width: 33%;
                            overflow: hidden;
                        }
                    }
                }



                .mapleft1 {
                    display: flex;

                    .mapleft1_sticit {
                        color: white;
                        font-family: DIN, DIN;
                        font-weight: bold;
                        font-size: 16px;
                        line-height: 23px;
                        text-align: left;
                        font-style: normal;
                        text-transform: none;

                        .sticit_header {
                            text-align: center;
                            margin: 30px 0;


                            .header_num {
                                width: 22px;
                                text-align: center;
                                background-image: url(../imgUrl/maonum.png);
                                background-size: 100% 100%;
                                display: inline-block;
                                font-family: DIN, DIN;
                                font-weight: bold;
                                font-size: 14px;
                                line-height: 23px;
                                font-style: normal;
                                text-transform: none;
                            }
                        }

                        .sticit_number {
                            display: flex;
                            font-size: 10px;
                            margin-top: 10px;
                            font-family: Microsoft YaHei, Microsoft YaHei;
                            font-weight: 400;
                            font-size: 18px;
                            color: #00C8FF;
                            line-height: 21px;
                            text-align: center;
                            font-style: normal;
                            text-transform: none;

                            .sticit_number1 {
                                width: 88px;
                                height: 88px;
                                background-image: url(../imgUrl/mapnumbule.png);
                                background-size: 100% 100%;
                                margin-left: 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-family: DINPro, DINPro;
                                font-weight: bold;
                                font-size: 40px;

                                line-height: 41px;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }

                            .sticit_number2 {
                                width: 88px;
                                height: 88px;
                                background-image: url(../imgUrl/mapNumred.png);
                                background-size: 100% 100%;
                                display: flex;
                                margin-left: 20px;
                                justify-content: center;
                                align-items: center;
                                font-family: DINPro, DINPro;
                                font-weight: bold;
                                font-size: 40px;

                                line-height: 41px;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }

                            .sticit_number3 {
                                width: 88px;
                                height: 88px;
                                background-image: url(../imgUrl/mapnumgary.png);
                                background-size: 100% 100%;
                                margin-left: 20px;
                                display: flex;
                                justify-content: center;
                                align-items: center;
                                font-family: DINPro, DINPro;
                                font-weight: bold;
                                font-size: 40px;

                                line-height: 41px;
                                text-align: right;
                                font-style: normal;
                                text-transform: none;
                            }

                        }

                    }
                }
            }


        }

        .map_center_map {
            flex: 1;
            padding-top: 50px;

            .center_img {
                width: 100%;
                height: 40vh;
                margin-top: 50px;
                background-image: url(../imgUrl/maptree.png);
                background-size: 100% 100%;
            }

            .center_warp {
                display: flex;

                .mapleft_card {
                    width: 22vw;
                    height: 25vh;
                    background-image: url(../imgUrl/mapcard.png);
                    background-size: 100% 100%;
                    margin-bottom: 20px;
                    margin-left: 30px;
                }
            }
        }

        .map_center_right {
            display: flex;

            .mapRight {
                width: 33.5px;
            }

            .mapRight_card {
                width: 23vw;
                height: 24.5vh;
                background-image: url(../imgUrl/mapcard.png);
                background-size: 100% 100%;
                margin-bottom: 20px;

                .maptable {
                    width: 96%;
                    height: 21vh;
                    padding: 10px;
                    padding: 10px 0;
                    text-align: center;
                    margin: 2px auto;

                    ::-webkit-scrollbar {
                        display: none;
                    }

                    .maptable_list {
                        display: flex;
                        width: 100%;
                        height: 26px;
                        font-size: 14px;
                        background: rgba(0, 163, 255, 0.3);
                        border-radius: 0px 0px 0px 0px;
                        color: rgba(255, 255, 255, 1);
                        padding: 5px;
                        margin-top: 5px;

                        .maptable_li {
                            width: 33%;
                            overflow: hidden;
                        }
                    }
                }

                .mapRight_cardFlex {
                    display: flex;
                    margin-top: 42px;

                    .cardFlex_img {
                        width: 180px;
                        height: 145px;
                        background-image: url(../imgUrl/maprightbj.png);
                        background-size: 100% 100%;
                        margin-left: 9px;
                        color: white;


                        .cardFlex_text {
                            font-family: Afacad, Afacad;
                            font-weight: 400;
                            font-size: 17px;
                            color: #00C2FF;
                            line-height: 25px;
                            text-align: left;
                            font-style: normal;
                            text-transform: none;
                            padding: 6px;
                        }

                        .cardFlex_num {
                            font-family: Afacad, Afacad;
                            font-weight: 400;
                            font-size: 28px;
                            color: #FFFFFF;
                            line-height: 25px;
                            letter-spacing: 1px;
                            text-shadow: 0px 0px 5px #0075FF;
                            text-align: right;
                            font-style: normal;
                            text-transform: none;
                            padding: 35px 15px;
                        }
                    }
                }
            }
        }

        .maptitle {
            margin-left: 51px;
            padding-top: 7px;
            font-family: YouSheBiaoTiHei, YouSheBiaoTiHei;
            font-weight: 400;
            font-size: 18px;
            text-shadow: 0px 3px 3px rgba(0, 38, 95, 0.3);
            text-align: left;
            font-style: normal;
            text-transform: none;
            color: white;
        }
    }

}

::v-deep .el-input__inner {
    background-color: transparent;
    border: none;
    width: 260px;
}

.arrowDownUr {
    width: 100%;
    background-color: rgba(0, 55, 86, 0.60);
    height: 300px;
    border-radius: 5px;
    overflow-y: scroll;

}

::-webkit-scrollbar {
    /*隐藏滚轮*/
    display: none;
}

.arrowDownLi {
    width: 100%;
    text-align: center;
    padding: 5px 0;
    cursor: pointer;
}

.arrowDownLiClick {
    color: #00C2FF;
}

.arrowDownSelesWarp {
    width: 400px;
    margin-top: -45px;
    width: 160px;
    height: 55px;
    background-color: rgba(0, 55, 86, 0.60);
    border-radius: 5px;
    margin-left: 30px;
    font-size: 20px;

    .arrowDownSelesLsit {
        width: 100%;
        background-color: rgba(0, 55, 86, 0.60);
        height: 300px;
        border-radius: 5px;
        overflow-y: scroll;
        margin-top: 20px;
    }

    .arrowDownSelesLi {
        width: 100%;
        text-align: center;
        padding: 5px 0;
        cursor: pointer;
    }

    .arrowDownSelesLiClick {
        color: #00C2FF;
    }

}

.arrowDownSeles {
    padding: 0 10px;
    display: flex;
    position: relative;
    z-index: 11;

    .arrowDownSelesLeft {
        width: 120px;
        padding-top: 20px;
    }

    .arrowDownSelesright {
        width: 20px;
        padding-top: 20px;
    }


}
</style>
